<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>ZoomlaCLI-Studio接口使用说明 | 叶倾城的网站</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="[目录]    ZoomlaCLI-Studio接口使用说明 版本信息 文档结构说明 ZoomlaCLI-Studio中的models接口配置项说明 配置文件 接口信息 接口用例   Zoomla!CLI-Studio之远程服务端配置 第一步：启用远程JSONP接口 第二步：配置appid和apikey项   扩展资源 sass&#x2F;scss官方手册 Boostrap 中国站 zico图标库 Uni全">
<meta property="og:type" content="article">
<meta property="og:title" content="ZoomlaCLI-Studio接口使用说明">
<meta property="og:url" content="http://yoursite.com/2020/03/07/ZoomlaCLI-Studio%E6%8E%A5%E5%8F%A3%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/index.html">
<meta property="og:site_name" content="叶倾城的网站">
<meta property="og:description" content="[目录]    ZoomlaCLI-Studio接口使用说明 版本信息 文档结构说明 ZoomlaCLI-Studio中的models接口配置项说明 配置文件 接口信息 接口用例   Zoomla!CLI-Studio之远程服务端配置 第一步：启用远程JSONP接口 第二步：配置appid和apikey项   扩展资源 sass&#x2F;scss官方手册 Boostrap 中国站 zico图标库 Uni全">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="http://yoursite.com/2020/03/07/ZoomlaCLI-Studio%E6%8E%A5%E5%8F%A3%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/01-%E5%BC%80%E5%90%AF%E6%8E%A5%E5%8F%A3.jpg">
<meta property="og:image" content="http://yoursite.com/2020/03/07/ZoomlaCLI-Studio%E6%8E%A5%E5%8F%A3%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/02-%E8%8E%B7%E5%8F%96appid%E5%92%8Capikey.jpg">
<meta property="og:image" content="https://img.shields.io/badge/%E4%B8%80%E7%BE%A4-541450128-blue.svg?style=for-the-badge&logo=appveyor">
<meta property="og:image" content="https://img.shields.io/badge/%E4%BA%8C%E7%BE%A4-601781959-blue.svg?style=for-the-badge&logo=appveyor">
<meta property="og:image" content="https://img.shields.io/badge/%E5%AE%98%E6%96%B9QQ%E5%AE%A2%E6%9C%8D1-524979923-red.svg?style=for-the-badge&logo=appveyor">
<meta property="og:image" content="https://img.shields.io/badge/%E5%AE%98%E6%96%B9QQ%E5%AE%A2%E6%9C%8D2-1799661890-red.svg?style=for-the-badge&logo=appveyor">
<meta property="article:published_time" content="2020-03-07T06:20:24.059Z">
<meta property="article:modified_time" content="2020-03-07T06:21:23.089Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://yoursite.com/2020/03/07/ZoomlaCLI-Studio%E6%8E%A5%E5%8F%A3%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/01-%E5%BC%80%E5%90%AF%E6%8E%A5%E5%8F%A3.jpg">
  
    <link rel="alternate" href="/atom.xml" title="叶倾城的网站" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 4.2.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">叶倾城的网站</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-ZoomlaCLI-Studio接口使用说明" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/03/07/ZoomlaCLI-Studio%E6%8E%A5%E5%8F%A3%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/" class="article-date">
  <time datetime="2020-03-07T06:20:24.059Z" itemprop="datePublished">2020-03-07</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      ZoomlaCLI-Studio接口使用说明
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>[目录]</p>
<!-- TOC -->

<ul>
<li><a href="#zoomlacli-studio%e6%8e%a5%e5%8f%a3%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e">ZoomlaCLI-Studio接口使用说明</a><ul>
<li><a href="#%e7%89%88%e6%9c%ac%e4%bf%a1%e6%81%af">版本信息</a></li>
<li><a href="#%e6%96%87%e6%a1%a3%e7%bb%93%e6%9e%84%e8%af%b4%e6%98%8e">文档结构说明</a></li>
<li><a href="#zoomlacli-studio%e4%b8%ad%e7%9a%84models%e6%8e%a5%e5%8f%a3%e9%85%8d%e7%bd%ae%e9%a1%b9%e8%af%b4%e6%98%8e">ZoomlaCLI-Studio中的models接口配置项说明</a><ul>
<li><a href="#%e9%85%8d%e7%bd%ae%e6%96%87%e4%bb%b6">配置文件</a></li>
<li><a href="#%e6%8e%a5%e5%8f%a3%e4%bf%a1%e6%81%af">接口信息</a></li>
<li><a href="#%e6%8e%a5%e5%8f%a3%e7%94%a8%e4%be%8b">接口用例</a></li>
</ul>
</li>
<li><a href="#zoomlacli-studio%e4%b9%8b%e8%bf%9c%e7%a8%8b%e6%9c%8d%e5%8a%a1%e7%ab%af%e9%85%8d%e7%bd%ae">Zoomla!CLI-Studio之远程服务端配置</a><ul>
<li><a href="#%e7%ac%ac%e4%b8%80%e6%ad%a5%e5%90%af%e7%94%a8%e8%bf%9c%e7%a8%8bjsonp%e6%8e%a5%e5%8f%a3">第一步：启用远程JSONP接口</a></li>
<li><a href="#%e7%ac%ac%e4%ba%8c%e6%ad%a5%e9%85%8d%e7%bd%aeappid%e5%92%8capikey%e9%a1%b9">第二步：配置appid和apikey项</a></li>
</ul>
</li>
<li><a href="#%e6%89%a9%e5%b1%95%e8%b5%84%e6%ba%90">扩展资源</a><ul>
<li><a href="#sassscss%e5%ae%98%e6%96%b9%e6%89%8b%e5%86%8c">sass/scss官方手册</a></li>
<li><a href="#boostrap-%e4%b8%ad%e5%9b%bd%e7%ab%99">Boostrap 中国站</a></li>
<li><a href="#zico%e5%9b%be%e6%a0%87%e5%ba%93">zico图标库</a></li>
<li><a href="#uni%e5%85%a8%e7%90%83%e5%ad%97%e7%a0%81%e8%a1%a8">Uni全球字码表</a></li>
<li><a href="#webfont%e5%ad%97%e4%bd%93%e5%bc%95%e7%94%a8">webfont字体引用</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- /TOC -->


<h1 id="ZoomlaCLI-Studio接口使用说明"><a href="#ZoomlaCLI-Studio接口使用说明" class="headerlink" title="ZoomlaCLI-Studio接口使用说明"></a>ZoomlaCLI-Studio接口使用说明</h1><h2 id="版本信息"><a href="#版本信息" class="headerlink" title="版本信息"></a>版本信息</h2><p>接口版主程序版本：v8.1.3<br>匹配逐浪CMS版本：V8.1.3</p>
<h2 id="文档结构说明"><a href="#文档结构说明" class="headerlink" title="文档结构说明"></a>文档结构说明</h2><pre><code>|-- dis             //目录编译输出
|-- src             //主要开发目录
|   |-- App.vue
|   |-- main.js
|   |-- assets      //资源目录，放自定义开发资源
|       |-- images  //自定义图片资源，项目build后会加上md5字符串编译
|       |-- global.scss  //全局CSS，逐浪CMS卓越前端不采用分散CSS编译
|       |-- _zoomlaCMS.scss  //逐浪SCSS之mixin混合文件
|   |-- assets
|   |-- components  //组件目录，带全局组件，本案中如ZoomlaFoot.vue、ZoomlaKefu.vue、Zoomla_plus_iteam.vue均代表不同的组件
|   |-- models      //与远程jsonp接口配置项
|   |-- plugins     //扩展插件
|   |-- router      //路由定义，相当于栏目节点定义
|   |-- views       //页面配置，相当于节点/频道/内容模板
|   |-- App.vue     //全局vue文件，相当于全站模板
|   |-- main.js     //全局组件插件配置，相当于逐浪CMS的全局配置。</code></pre><h2 id="ZoomlaCLI-Studio中的models接口配置项说明"><a href="#ZoomlaCLI-Studio中的models接口配置项说明" class="headerlink" title="ZoomlaCLI-Studio中的models接口配置项说明"></a>ZoomlaCLI-Studio中的models接口配置项说明</h2><blockquote>
<p>此处于配置接口，用于实现与远程服务端的内容交互（如果您不需要支持访客留言、内容更新，则可以忽略这一段，当然我们推荐使用此配置项，从而使站点拥有强大的功能）。</p>
</blockquote>
<h3 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h3><p>models目录位于<code>/src/models</code>位置。<br>下面有三个文件：</p>
<ul>
<li>common.js</li>
<li>HTTP.js</li>
<li>Regex.js</li>
</ul>
<p>远程jsonp接口配置文件主要在<code>common.js</code><br>打开<code>common.js</code>文件，在第16行位置，可以看到如下信息：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">const baseUrl &#x3D; &#39;http:&#x2F;&#x2F;网址&#x2F;API&#x2F;WXAPP?apiId&#x3D;eecabae94e760d1c50157f35b5d4aa72&amp;apiKey&#x3D;c13b007c8feb97803c24f76735a820b2&amp;action&#x3D;&#39;;</span><br><span class="line">		let url &#x3D; baseUrl+action;</span><br></pre></td></tr></table></figure>
<h3 id="接口信息"><a href="#接口信息" class="headerlink" title="接口信息"></a>接口信息</h3><p>从上面可以看到，一个完整的接口包括以下三个部份信息：</p>
<ul>
<li>url信息，即上面的“网址”字段，这是你的服务端网址</li>
<li>appid，这需要您的Zoomla!逐浪CMS后台分配</li>
<li>apikey，这需要您的Zoomla!逐浪CMS后台分配</li>
</ul>
<h3 id="接口用例"><a href="#接口用例" class="headerlink" title="接口用例"></a>接口用例</h3><p>从上面接口中，我们可以加不同的调式用例，实现不同的远程信息调用：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"># 模型列表</span><br><span class="line">http:&#x2F;&#x2F;网址&#x2F;API&#x2F;WXAPP?apiId&#x3D;eecabae94e760d1c50157f35b5d4aa72&amp;apiKey&#x3D;c13b007c8feb97803c24f76735a820b2&amp;action&#x3D;model_list  </span><br><span class="line"></span><br><span class="line"># 节点列表</span><br><span class="line">http:&#x2F;&#x2F;网址&#x2F;API&#x2F;WXAPP?apiId&#x3D;eecabae94e760d1c50157f35b5d4aa72&amp;apiKey&#x3D;c13b007c8feb97803c24f76735a820b2&amp;action&#x3D;node_list  </span><br><span class="line"></span><br><span class="line"># 父节点下多节点列表</span><br><span class="line">http:&#x2F;&#x2F;网址&#x2F;API&#x2F;WXAPP?apiId&#x3D;eecabae94e760d1c50157f35b5d4aa72&amp;apiKey&#x3D;c13b007c8feb97803c24f76735a820b2&amp;action&#x3D;node_list&amp;pid&#x3D;1</span><br><span class="line"></span><br><span class="line"># 内容读取</span><br><span class="line">http:&#x2F;&#x2F;网址&#x2F;API&#x2F;WXAPP?apiId&#x3D;eecabae94e760d1c50157f35b5d4aa72&amp;apiKey&#x3D;c13b007c8feb97803c24f76735a820b2&amp;action&#x3D;content_list&amp;pnid&#x3D;[节点ID]</span><br></pre></td></tr></table></figure>
<p><strong>注以上文档中的appid和apikey均为临时信息，不同站点配置信息不同，需要自定义配置 。</strong></p>
<h2 id="Zoomla-CLI-Studio之远程服务端配置"><a href="#Zoomla-CLI-Studio之远程服务端配置" class="headerlink" title="Zoomla!CLI-Studio之远程服务端配置"></a>Zoomla!CLI-Studio之远程服务端配置</h2><p>为增强安全，Zoomla!逐浪CMS远程JSONP接口并非默认开通，需要站长根据需求，手动开通，并配置相关信息，才可以使用。</p>
<h3 id="第一步：启用远程JSONP接口"><a href="#第一步：启用远程JSONP接口" class="headerlink" title="第一步：启用远程JSONP接口"></a>第一步：启用远程JSONP接口</h3><p><img src="01-%E5%BC%80%E5%90%AF%E6%8E%A5%E5%8F%A3.jpg" alt="01-开启接口"> </p>
<h3 id="第二步：配置appid和apikey项"><a href="#第二步：配置appid和apikey项" class="headerlink" title="第二步：配置appid和apikey项"></a>第二步：配置appid和apikey项</h3><p><img src="02-%E8%8E%B7%E5%8F%96appid%E5%92%8Capikey.jpg" alt="02-获取appid和apikey"> </p>
<blockquote>
<p>注：Zoomla!逐浪CMS每个分行版本，可能接口和UI会有改进和调整，相关信息敬请访问  <a href="http://www.z01.com" target="_blank" rel="noopener">www.z01.com</a>   官网，或通过下面方法获得服务：</p>
</blockquote>
<p>官网：<a href="http://www.z01.com" target="_blank" rel="noopener">www.z01.com</a><br>帮助中心： <a href="http://help.z01.com" target="_blank" rel="noopener">http://help.z01.com</a><br>快手抖音B站和youtube搜索：最帅程序员发哥</p>
<p>QQ交流群号：<br><a href="https://jq.qq.com/?_wv=1027&k=5Ephzpq" target="_blank" rel="noopener"><img src="https://img.shields.io/badge/%E4%B8%80%E7%BE%A4-541450128-blue.svg?style=for-the-badge&logo=appveyor" alt="加入QQ群"></a>   <a href="https://jq.qq.com/?_wv=1027&k=50a28BK" target="_blank" rel="noopener"><img src="https://img.shields.io/badge/%E4%BA%8C%E7%BE%A4-601781959-blue.svg?style=for-the-badge&logo=appveyor" alt="加入QQ群"></a> </p>
<p>官方QQ客服：<br><a href="http://wpa.qq.com/msgrd?v=3&uin=745151353&site=qq&menu=yes" target="_blank" rel="noopener"><img src="https://img.shields.io/badge/%E5%AE%98%E6%96%B9QQ%E5%AE%A2%E6%9C%8D1-524979923-red.svg?style=for-the-badge&logo=appveyor" alt="官方QQ客服1"></a>  <a href="http://wpa.qq.com/msgrd?v=3&uin=1799661890&site=qq&menu=yes" target="_blank" rel="noopener"><img src="https://img.shields.io/badge/%E5%AE%98%E6%96%B9QQ%E5%AE%A2%E6%9C%8D2-1799661890-red.svg?style=for-the-badge&logo=appveyor" alt="官方QQ客服2"></a> </p>
<p>电话：021-50391046、13177777714</p>
<h2 id="扩展资源"><a href="#扩展资源" class="headerlink" title="扩展资源"></a>扩展资源</h2><h3 id="sass-scss官方手册"><a href="#sass-scss官方手册" class="headerlink" title="sass/scss官方手册"></a>sass/scss官方手册</h3><p>sass/scss官方手册 <a href="http://code.z01.com/sass" target="_blank" rel="noopener">http://code.z01.com/sass</a></p>
<h3 id="Boostrap-中国站"><a href="#Boostrap-中国站" class="headerlink" title="Boostrap 中国站"></a>Boostrap 中国站</h3><p>Boostrap 中国站 <a href="http://code.z01.com/v4" target="_blank" rel="noopener">http://code.z01.com/v4</a></p>
<h3 id="zico图标库"><a href="#zico图标库" class="headerlink" title="zico图标库"></a>zico图标库</h3><p>zico图标库 <a href="http://ico.z01.com" target="_blank" rel="noopener">http://ico.z01.com</a></p>
<h3 id="Uni全球字码表"><a href="#Uni全球字码表" class="headerlink" title="Uni全球字码表"></a>Uni全球字码表</h3><p>Uni全球字码表 <a href="http://www.ziti163.com/uni" target="_blank" rel="noopener">http://www.ziti163.com/uni</a></p>
<h3 id="webfont字体引用"><a href="#webfont字体引用" class="headerlink" title="webfont字体引用"></a>webfont字体引用</h3><p>webfont字体引用 <a href="http://www.ziti163.com/webfont" target="_blank" rel="noopener">http://www.ziti163.com/webfont</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/03/07/ZoomlaCLI-Studio%E6%8E%A5%E5%8F%A3%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/" data-id="ck7h7xxv90000cgdb98wka6kd" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2020/03/07/%E6%9C%AC%E7%A8%8B%E5%BA%8F%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          本程序目录结构
        
      </div>
    </a>
  
  
    <a href="/2020/03/07/README/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">README</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/03/">March 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2020/03/07/%E6%9C%AC%E7%A8%8B%E5%BA%8F%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84/">本程序目录结构</a>
          </li>
        
          <li>
            <a href="/2020/03/07/ZoomlaCLI-Studio%E6%8E%A5%E5%8F%A3%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/">ZoomlaCLI-Studio接口使用说明</a>
          </li>
        
          <li>
            <a href="/2020/03/07/README/">README</a>
          </li>
        
          <li>
            <a href="/2020/03/07/hello-world/">你好，老汪</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>